<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echartsJs/echarts.js"></script>
</head>

<body>

    <!-- 定义一个容器 -->
    <div id="myChart" style="width:500px;height:500px"></div>

    <script>
        let chartDom = document.getElementById("myChart");
        let myChart = echarts.init(chartDom);
        let option = {
            title: {
                text: '饼状图'
            },
            tooltip: {},
            legend: {//数据交互按钮
                data: ["袜子", "羊毛衫", "雪纺衫", "裤子"],
                orient: "horizontal",//数据交互按钮的排列方向,horizontal、vertical
                left: 100
            },
            dataset: {
                source: [
                    {
                        name: "袜子",
                        value: 100
                    },
                    {
                        name: "羊毛衫",
                        value: 90
                    },
                    {
                        name: "雪纺衫",
                        value: 120
                    },
                    {
                        name: "裤子",
                        value: 230
                    }


                ]


            },
            series: [
                {
                    name: '销量',
                    type: 'pie',
                    // left:400,
                    center: [200, 280],//圆心
                    radius: [0, 100],//半径，内半径和外半径
                    selectedMode: "series",//single、multiple、series

                }],
        }
        myChart.setOption(option);

    </script>
</body>

</html>